import { ajaxPromise } from "../js/ajax.js";
import "./echarts.min.js"; // echarts 全局对象

var chinaJSON = await ajaxPromise({ type: "get", url: "../data/china.json" });

echarts.registerMap("china", chinaJSON);


var data = JSON.parse(chinaJSON); // chinaJSON json字符串
var { features } = data;


var GeoChina = {};
features.forEach((item) => {
    var { properties: { name, cp } } = item
    // console.log(name, cp);
    GeoChina[name] = cp;
})
console.log(GeoChina);

// 从哪来
var postData = [{
    name: "天津",
    value: "178546"
}, {
    name: "湖南",
    value: "178546"
}, {
    name: "四川",
    value: "178546"
}, {
    name: "福建",
    value: "178546"
}]

// 目标地址
var target = "湖北";


function genData(GeoData, fromData, target, reverse = false) {
    var list = [];
    if (reverse) {
        for (var i = 0; i < fromData.length; i++) {
            var item = fromData[i];

            // item.name  => fromData对应省份名称
            // target => 目标省份名称
            if (item.name != target) {
                var obj = {}
                obj.coords = [GeoData[target], GeoData[item.name]];
                list.push(obj);
            }
        }
    } else {
        for (var i = 0; i < fromData.length; i++) {
            var item = fromData[i];

            // item.name  => fromData对应省份名称
            // target => 目标省份名称
            if (item.name != target) {
                var obj = {}
                obj.coords = [GeoData[item.name], GeoData[target]];

                list.push(obj);
            }
        }
    }
    return list;
}




var homeChina = document.getElementsByClassName("home-china")[0];
var homeEcharts = echarts.init(homeChina);


var option = {
    // title: {},
    // legend: {},
    // toolbox: {
    //     show: true
    // },
    // tooltips: {
    //     show: true,
    // },
    // 地理坐标系组件用于地图的绘制，支持在地理坐标系上绘制散点图，线集。
    geo: {
        type: "map",
        map: "china",
        // roam: "scale",
        scaleLimit: {
            min: 0.5,
            max: 1.2
        },
        label: {
            show: true,
            color: "#fff",
        },
        itemStyle: {
            color: "transparent",
            borderWidth: 1,
            borderType: "solid",
            borderColor: "#0f80cb"
        },
        emphasis: {
            disabled: true,
        }
    },
    series: [{
        type: "lines",
        lineStyle: { // 所有线的样式
            width: 2,
            type: "solid",
            color: "#fbe942",
            curveness: 0.2,
        },
        // 线特效配置
        effect: {
            show: true,
            // color: "rgba(0,0,0,0.5)",
            // symbol: "triangle",
            symbol: "image://https://img10.360buyimg.com/img/jfs/t1/199023/6/37257/12539/65361a20F9cac6be6/80afe4b365931a5d.jpg",
            // symbol: "image://../images/Airplane.png",
            // symbol: "path://M238.6 842.5l42.4-99.3L141.5 732l-49.4 45.8 146.1 64.4zM485.9 136.2L435.5 212l50.2 3.8 36.7-55.3c6.7-10 3.9-23.6-6.2-30.3-10.1-6.8-23.6-4-30.3 6z M451 213.1l-109.9-9.2 0.2-0.2-50-4-0.1 0.1-132.1-11L85.9 299l400.3 78.9 13.8 9.3 95.7-158-7.4-4.9-87.4-7.2 0.3-0.5-49.9-4zM717.5 289L610.8 438.3l9.1 5.9 242.5 348.6 73.2-110.2-139.6-251 0.4-0.5-74.3-138.7z M284.2 872.8l124 115.2 23.2-63.3-74.9-135.2-73.1 82.8zM934.4 530.1c6.7-10.1 3.9-23.7-6.2-30.4-10-6.7-23.7-4-30.4 6.1l-33.1 49.4 23 44.7 46.7-69.8zM811.1 343.3l-34.2 51.4 23.4 44.6 47.3-71.7c6.7-10 3.9-23.6-6.2-30.3-10-6.7-23.6-4.1-30.3 6zM380.9 144.1c6.7-10.1 3.9-23.7-6.1-30.4-10.1-6.7-23.7-3.9-30.4 6.2l-53.1 79.9 50.1 4.2 39.5-59.9z M797.9 320C878 184.7 832.6 87 811.4 53.7c-5.4-8.4-13.6-13.9-23.5-15.5-38.7-6.1-146.3-8.5-238.8 119.2-127.3 176-305.4 583.8-353 666.2l42.2 18.6 45.2 30 43.9 40.5c57.5-78.2 354-395.9 470.5-592.7z M761.4 98.6c-1.5-1-3-1.9-4.4-2.8-27.9-17-58.1-20.9-73.4 2.1 0 0 34.2 2.2 60.8 17 2 1.1 4 2.3 5.8 3.6 27.1 18 47.5 52.5 47.5 52.5 13.6-20.3-7.2-53-36.3-72.4z",
            symbolSize: 20,
        },
        data: genData(GeoChina, postData, "湖北")
        // data: [{
        //     coords: [
        //         [84.9023, 41.748],  // 起点
        //         [112.2363, 31.1572]   // 终点
        //     ],
        //     lineStyle: {  //  当前这条线的样式

        //     },
        // }, {
        //     coords: [
        //         [126.4746, 43.5938],  // 起点
        //         [112.2363, 31.1572]   // 终点
        //     ],
        //     lineStyle: {  //  当前这条线的样式

        //     },
        // }]
    }]
}

homeEcharts.setOption(option);

window.onresize = function () {
    homeEcharts.resize();
}

